<template>
  <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#2d2f33"
      text-color="#ccc"
      :default-active="$route.path"
      @select="handleSelect"
      active-text-color="#409EFF">
    <el-menu-item class="menuItemCla" index="1" @click="goToIndex">首页</el-menu-item>

    <el-submenu class="menuItemCla" index="2" style="color: white">
      <template slot="title">用户信息管理</template>
      <el-menu-item class="menuItemCla" index="2-1" @click="goToCustomerInfo">顾客信息管理</el-menu-item>
      <el-menu-item class="menuItemCla" index="2-2" @click="goToEmployeeInfo">员工信息管理</el-menu-item>
      <el-menu-item class="menuItemCla" index="2-3" @click="goToAddressInfo">配送地址管理</el-menu-item>
    </el-submenu>


    <el-submenu class="menuItemCla" index="4" style="color: white">
      <template slot="title">菜品管理</template>
      <el-menu-item class="menuItemCla" index="4-1" @click="goToProductInfo">菜品管理</el-menu-item>
    </el-submenu>

    <el-submenu class="menuItemCla" index="5" style="color: white">
      <template slot="title">订单管理</template>
      <el-menu-item class="menuItemCla" index="5-1" @click="goToOrderInfo">订单状态</el-menu-item>
      <el-menu-item class="menuItemCla" index="5-2" @click="goToCommentInfo">评论管理</el-menu-item>
    </el-submenu>

    <el-submenu class="menuItemCla" index="6" style="color: white">
      <template slot="title">顾客管理系统</template>
      <el-menu-item class="menuItemCla" index="6-1" @click="goToCustomer">顾客入口</el-menu-item>
      <el-menu-item class="menuItemCla" index="6-2" @click="goToWaiter">员工入口</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
name: "menuBar2",
  data() {
    return {
      // activeIndex2: '1'
    };
  },
  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    goToIndex(){
      this.$router.push('/index')
    },

    goToCustomerInfo(){
      this.$router.push('/information/customer')
    },
    goToEmployeeInfo(){
      this.$router.push('/information/waiter')
    },
    goToAddressInfo(){
      this.$router.push('/information/address')
    },

    goToProductInfo(){
      this.$router.push('/product/productInfo')
    },

    goToOrderInfo(){
      this.$router.push('/order/info')
    },
    goToCommentInfo(){
      this.$router.push('/order/comment')
    },

    goToCustomer(){
      this.$router.push('/about/teamInfo')
    },
    goToWaiter(){
       this.$router.push('/about/dataInfo')
    },
  }
}
</script>

<style scoped>
.el-menu-item:focus{
  outline: 0 !important;
  color: #409EFF !important;
}
.el-menu-item.is-active {
  color: #fff !important;
  background: #409EFF !important;
}

.el-submenu__title:focus, .el-submenu__title:focus{
  outline: 0 !important;
  color: #fff !important;
  background: #409EFF !important;
}



</style>
